<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.ajax_promise</title>
</head>
<body>
<button id="btn">发起请求</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>

  function  sendData(url,data){
   return   new Promise(((resolve, reject) => {
          $.ajax({
              url: url,
              type: 'GET',
              data:data,
              success: (response)=>{
                   resolve(response);
              },
              error: (err)=>{
                  reject(err);
              }
          })

      }))

  }
  const reqData= {
      username: "Jack",
      age:12
  }

  $("#btn").click(
      sendData("http://127.0.0.1/ajax",reqData).then(
          value =>{
              console.log("第一次请求");
              return sendData("http://127.0.0.1/ajax",reqData);
          },
          reason =>{
              /*这样写的话存在一个问题 当第一次请求失败的时候打印一句话本质上会返回一个undefined
              * 那么第二次请求还是会为fulfilled,应当在错误的时候就停止作用链的传递*/
              console.log("第一次请求失败"+reason);
              //返回一个状态为pendding的Promise对象终止作用链的传递
              return new Promise(()=>{});
          }
      ).then(
          value =>{
              console.log("第二次请求");
              return sendData("http://127.0.0.1/ajax",reqData);
          },
          reason =>{
              console.log("第二次请求失败"+reason);
          }
          /*也可在上面的代码中不交代返回错误的获取 可在最下方进行总的抓取*/
      ).catch(
          reason => {throw reason}
      )

  )



</script>

</body>
</html>